<template>
  <div class="home">
    <!-- 组件缓存:
    1.找到该组件所对应的路由出口,同时对该组件来一个name命名
    2使用:<keeo-alive></keeo-alive>将路由出口包起来,该路由出口所有组件都会被缓存
    3.如果希望某个组件被缓存
    <keep-alive include="name的值a,name的值b"></keep-alive>
    4.只是不想缓存某个组件,其他组件都缓存
    <keep-alive exclude='name的值a,name的值b' -->
      <!-- 或者把数据保存在vuex里判断里面有没有数据,没有保存进去 -->
    <keep-alive include='find,findList'> <router-view ></router-view></keep-alive>
    <!-- 单元素动画
进入和离开动作v-if/v-show
要用transition包起来,给个name是前缀如xxx
配合css
进入离开动画体
.xxx-enter-active
.xxx-leave-active
.xxx-enter 从开始状态到正常状态
.xxx-leave-to从正常到结束状态-->

    <transition name="xxx">
      <!-- 标签栏
    van-battar
    v-model:值(active)对应的索引项启用路由模式就没用了,值要写在data模板里
    active-color选中的颜色
    inactive-color没选中的颜色
    route启动路由模式,默认是true :route='false' 常规写法记得要绑定不然得到的就是字符串 -->
      <!-- placeholder固定在底部时，是否在标签位置生成一个等高的占位元素 -->
      <!-- van-battar-item
    icon vant自带的图标
    to='路径' 启用了路由模式后跳转的路由
    插槽(默认/具名) -->
      <!-- needNav这个为true才显示,路由元信息配置在meta里,所以通过路由route.meta.needNav -->
      <van-tabbar
        active-color="#e40137"
        inactive-color="#b4b4bd"
        route
        class="tabbar"
        placeholder
        v-if="$route.meta.needNav"
      >
        <van-tabbar-item to="/home/company">
          <span>公司</span>
          <template #icon>
            <i class="iconfont f28">&#xe63b;</i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/question">
          <span>刷题</span>
          <template #icon>
            <i class="iconfont f28">&#xe63f;</i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/find">
          <span>发现</span>
          <template #icon>
            <i class="iconfont f28">&#xe63a;</i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/my">
          <span>我的</span>
          <template #icon>
            <i class="iconfont f28">&#xe645;</i>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>
<style lang="less" scoped>
.home {
  .tabbar {
    height: 60px;
  }
  .f28 {
    font-size: 28px;
  }
  // 进入动画执行体
  .xxx-enter-active {
    transition: all 0.5s;
  }
  // 离开动画执行体
  .xxx-leave-active {
    transition: all 0.5s;
  }
  // 从开始到正常状态
  .xxx-enter {
    opacity: 0;
  }
  // 从正常状态到结束
  .xxx-leave-to {
    opacity: 0;
  }
}
</style>
